<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<meta name="description" content="智能社是一家专注于web前端开发技术的公司，目前主要提供JavaScript培训和HTML5培训两项服务，同时还推出了大量javascript基础知识教程，智能课堂为你带来全新的学习方法和快乐的学习体验。" />
<title>智能社— http://www.zhinengshe.com</title>
<link rel="stylesheet" href="./Css/index.css" />
    <script src="Js/jquery-3.2.0.min.js"></script>
    <script src="Js/angular.js"></script>
    <script>
       window.onload=function () {
           function rnd(n,m){
               return Math.floor(Math.random() * (m-n) + n);
           }
           angular.module('index',[])
               .controller('msgctrl',($scope,$http)=>{
                     $scope.addNew=()=>{
                         $http.get(`wish.php?act=add&username=${$scope.username}&content=${$scope.content}`)
                             .then(res=>{
//                                 console.log(res.data)

                                 if(res.data.error){
                                     alert('发布失败！');
                                 }
                                 if($('#username').value==""){
                                         alert('内容不能为空')
                                     }else { $('#layer').hide()
                                         $('#send-form').hide()
                                         $('#username').val('')
                                         $('#content').val('')
                                         render()}

                                     //隐藏发布框

                             },err=>{
                                 alert('失败')
                             })
                     }
                   //发布一条数据
                   function render() {
                           $http.get(`wish.php?act=get`)
                               .then(res=>{
                                   $scope.result=res.data.msg
                                   let w=document.documentElement.clientWidth||document.body.clientWidth;
                                   let h=document.documentElement.clientHeight||document.body.clientHeight;
                                   for(let item in $scope.result){
                                       let rnd1=rnd(0,w- 234)
                                       let rnd2=rnd(h-407,0)
                                       $scope.result[item].r={rnd1,rnd2}
//                                       alert($scope.result[item].r.rnd1)
                                   }
                               },err=>{
                                   alert('失败')
                               })
                       }
                   render()

                       //获取数据
            $scope.dele=(id)=>{
                    if(confirm('真的要删除吗')){
                          $http.get(`wish.php?act=delete&id=${id}`).then(res=>{
                              render()
                          },err=>{})
                    }
            }

//                   删除一条数据
               })
          $ ('#main').on('mousedown','.paper',function (ev) {
            /*  alert(1)*/
              let oEvent=ev||event
               let  disX=oEvent.pageX-$(this).position().left;
               let  disY=oEvent.pageY-$(this).position().top;
               let   _this=this
               function fnmove(ev) {
                   let oEvent=ev||event
                /*  alert(ev)*/
                   $(_this).css({
                       left:oEvent.pageX-disX+'px',
                       top:oEvent.pageY-disY+'px'
                   })
               }
              function fnup() {
                  $(document).off('mousemove',fnmove)
                  $(document).off('mouseup',fnup)
              }
             $(document).on('mousemove',fnmove)
               $(document).on('mouseup',fnup)
           })
       //    拖拽



             $('#send').click(()=>{
                 $('#layer').show()
                 $('#send-form').show()
             })
           $('#close').click(()=>{
                 $('#layer').hide()
                 $('#send-form').hide()
           })
//       点击开启留言板
          $('#content' ).on('input',()=>{
                $('#font-num').html(Math.abs(50-$('#content').val().length))
              if($('#content').val().length>=50){

                   $('#heihei').html( `愿望：(您已经超出 <span id='font-num'></span> 个字)`)
                  $('#font-num').html(Math.abs(50-$('#content').val().length))
              }
          })
//           判断字体是否超出

           $('#phiz img').on('click',function(){
              let yy=$(this).attr('alt')
            let  huhu=`[${yy}]`
              $('#content').val($('#content').val()+huhu)
           })
//         添加表情



       }
    </script>
    <script>

    </script>
</head>
<body ng-controller="msgctrl">
<div id='top'>
    <span id='send'></span>
</div>
<div id='main'>
    <dl class='paper a1' id="box" ng-repeat="item in result" style="left:{{item.r.rnd1}}px; top: {{item.r.rnd2}}px">
        <dt>
            <span class='username'>{{item.username}}</span>
            <span class='num'>{{item.id}}</span>
        </dt>
        <dd class='content'>{{item.content}}</dd>
        <dd class='bottom'>
            <span class='time'>{{item.time*1000|date:"yyyy-MM-dd-hh:mm:ss"}}</span>
            <a href="javascript:;" class='close' ng-click="dele(item.id)"></a>
        </dd>
    </dl>
</div>

<div id="layer"></div>

<div id='send-form' style="z-index:2147483647;">
    <p class='title'><span>许下你的愿望</span><a href="javascript:;" id='close'></a></p>
    <form action="" name='wish'>
        <p>
            <label for="username">昵称：</label>
            <input type="text" name='username'  ng-model="username"id='username'/>
        </p>
        <p>
            <label id="heihei" for="content">愿望：(您还可以输入&nbsp;<span id='font-num'>50</span>&nbsp;个字)</label>

            <textarea name="content" ng-model="content" id='content'>

            </textarea>
            <div id='phiz'>
                <img src="./Images/phiz/zhuakuang.gif" alt="抓狂" />
                <img src="./Images/phiz/baobao.gif" alt="抱抱" />
                <img src="./Images/phiz/haixiu.gif" alt="害羞" />
                <img src="./Images/phiz/ku.gif" alt="酷" />
                <img src="./Images/phiz/xixi.gif" alt="嘻嘻" />
                <img src="./Images/phiz/taikaixin.gif" alt="太开心" />
                <img src="./Images/phiz/touxiao.gif" alt="偷笑" />
                <img src="./Images/phiz/qian.gif" alt="钱" />
                <img src="./Images/phiz/huaxin.gif" alt="花心" />
                <img src="./Images/phiz/jiyan.gif" alt="挤眼" />
            </div>
        </p>
        <span id='send-btn' ng-click="addNew()" ;></span>
    </form>
</div>
<!--[if IE 6]>
<script type="text/javascript" src="./Js/iepng.js"></script>
<script type="text/javascript">
    DD_belatedPNG.fix('#send,#close,.close','background');
</script>
<![endif]-->
</body>
</html>